<template>
  <div>
    <a-modal
      v-if="!showFooter"
      v-model="visible"
      :dialog-style="{ top: `${top}` }"
      :title="title"
      :width="width"
      @ok="onOk"
      :footer="null">
      <slot></slot>
    </a-modal>
    <a-modal
      v-else
      v-model="visible"
      :dialog-style="{ top: `${top}` }"
      :title="title"
      :width="width"
      @ok="onOk">
      <slot></slot>
      <template slot="footer">
        <slot name="footer"></slot>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'modelVal',
    event: 'change'
  },
  props: {
    modelVal: {
      type: Boolean,
      default: false
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '查看详情'
    },
    width: {
      type: String,
      default: '40%'
    },
    top: {
      type: String,
      default: '10%'
    }
  },
  data () {
    return {
      visible: false
    }
  },
  mounted () {
    this.visible = this.modelVal
  },
  watch: {
    modelVal (v) {
      this.visible = v
    },
    visible (v) {
      this.$emit('change', v)
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    close () {
      this.visible = false
    },
    onOk () {
      this.$emit('ok')
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
